<template>
	<view class="container">
		<!-- 表单 -->
		<u-form :model="form" ref="registerForm">
			<u-form-item label="手机号" prop="phone">
				<u-input v-model="form.phone" placeholder="请输入手机号" type="number" />
			</u-form-item>

			<u-form-item label="密码" prop="password">
				<u-input v-model="form.password" placeholder="请输入密码" password />
			</u-form-item>

			<u-form-item label="确认密码" prop="confirmPassword">
				<u-input v-model="form.confirmPassword" placeholder="请再次输入密码" password />
			</u-form-item>
			<u-form-item label="验证码" prop="code">
				<u-input v-model="form.code" placeholder="请输入验证码" />
				<template #right>
					<u-code ref="uCode" @change="codeChange" :seconds="60" startText="获取验证码" changeText="X秒重新获取"
						endText="重新获取" />
					<u-button slot="button" @tap="getCode" :disabled="!canGetCode" type="success" size="mini" plain
						class="codeBtn">
						{{ codeTips }}
					</u-button>
				</template>
			</u-form-item>
		</u-form>
		<!-- 按钮 -->
		<u-button type="primary" @click="handleRegister" :loading="loading" style="margin-top: 40rpx">立即注册</u-button>
	</view>
</template>

<script>
import { getVerificationCode, register } from '../register/registerApi.js'
export default {
	data() {
		return {
			form: {
				phone: '',
				password: '',
				confirmPassword: '',
				code: ''
			},
			codeTips: '获取验证码',
			loading: false,
			canGetCode: true, // 是否可以获取验证码
			rules: {
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value) => /^1[3-9]\d{9}$/.test(value),
						message: '手机号格式不正确',
						trigger: ['blur']
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
					{
						min: 6,
						max: 20,
						message: '密码长度6-20位',
						trigger: ['blur']
					}
				],
				confirmPassword: [
					{
						required: true,
						message: '请确认密码',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value) => value === this.form.password,
						message: '两次输入密码不一致',
						trigger: ['blur']
					}
				],
				code: [
					{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}
				]
			}
		};
	},
	onReady() {
		// 兼顾wx小程序的校验规则
		this.$refs.registerForm.setRules(this.rules);
	},
	methods: {
		// 验证码倒计时
		codeChange(text) {
			this.codeTips = text;
			this.canGetCode = text === '获取验证码';
		},
		// 获取验证码
		async getCode() {
			// // 先校验手机号
			// const valid = await this.$refs.registerForm.validateField('phone');
			// if (!valid) return;


			await this.$refs.uCode.start();
			// 调用发送验证码接口
			try {
				console.log("进入发送验证码");

				const res = await getVerificationCode(this.form.phone);
				console.log("验证码", res);

				if (res.code === 200) {
					uni.showToast({
						title: '验证码发送成功',
						icon: 'none'
					});
					//延迟1.5s
					setTimeout(() => {
						uni.showToast({
							title: '验证码：' + res.data,
							icon: 'none',
							duration: 2000
						});
					}, 1500)

				} else {
					uni.showToast({
						title: res.message || '验证码发送失败',
						icon: 'none'
					});
				}
			} catch (error) {
				uni.showToast({
					title: '请求失败，请稍后重试',
					icon: 'none'
				});
			}

		},
		// 注册
		async handleRegister() {
			this.loading = true;
			try {
				const res = await register(this.form.phone, this.form.code, this.form.password, this.form.confirmPassword);
				console.log("注册返回",res);
				
				if (res.code === 200) {
					if (res.data == '注册成功') {
						uni.showToast({
							title: '注册成功',
							icon: 'none'
						});
						// 跳转到登录
						uni.navigateTo({
							 url: '/pages/login/login'
						});
					} else if (res.data == '密码和确认密码不一致') {
						uni.showToast({
							title: '密码和确认密码不一致',
							icon: 'none'
						});
					} else if (res.data == '验证码错误或已过期') {
						uni.showToast({
							title: '验证码错误或已过期',
							icon: 'none'
						});
					}else if(res.data == '该号码已经注册'){
						uni.showToast({
							title: '该号码已经注册',
							icon: 'none'
						});
					}
				} else {
					uni.showToast({
						title: res.message || '注册失败',
						icon: 'none'
					});
				}
			} catch (error) {
				uni.showToast({
					title: '请求失败，请稍后重试',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		}
	}

};
</script>

<style lang="less" scoped>
.container {
	padding: 40rpx;
}

.codeBtn {
	width: 180rpx !important;
	/* 强制宽度 */
	margin-left: 20rpx;
	flex-shrink: 0;
	/* 防止被压缩 */
	opacity: 1 !important;
	visibility: visible !important;
}
</style>
